<template>
	<view class="content">
		<view class="">
			<c-navBar title="教练课时统计"></c-navBar>
			<Filter :compList="compList" @startSearch="search" />
		</view>

		<view class="content-bottom-style">
			<c-list class="statistics-list" v-model:loading="loading" v-model:error="error" v-model:finished="finished"
				error-text="请求失败，点击重新加载" @load="Loads">
				<van-empty description="暂无数据" v-if="statisticsList.length ===0" />
				<view class="statistics-card" v-for="item in statisticsList" :key="item.teacher_id"
					@click="toDetail(item)">
					<view class="flex flex-a flex-sb">
						<view class="">
							<view class="flex flex-a">
								<view class="flex flex-a">
									<van-icon :name="account" size="14px" />
									<text class="ml-7" style="color: #333">{{
    	              item.teacher_nickname
    	            }}</text>
									<text class="ml-7" style="color: #666">({{ item.teacher_phone }})</text>
								</view>
								<view class="flex flex-a ml-7">
									<van-icon :name="gate" size="19px" />
									<text class="ml-7">{{ item.school_name }}</text>
								</view>
							</view>
							<view class="flex flex-a mt-14">
								<view class="flex flex-a">
									<van-icon :name="clock" size="18px" />
									<text
										style="margin-left: 10rpx; color: rgba(102, 102, 102, 1)">{{ item.all_hour }}小时</text>
									<text>(总课时)</text>
								</view>
								<view class="flex flex-a" style="margin-left: 80rpx">
									<van-icon :name="clock" size="18px" />
									<text class="ml-7"
										style="color: rgba(102, 102, 102, 1)">{{ item.stage_hour }}小时</text>
									<text style="color: rgba(78, 136, 230, 1)">(阶段课时)</text>
								</view>
							</view>
						</view>
						<van-icon name="arrow" size="20px" />
					</view>

					<view class="flex flex-ab mt-14 flex-sa" style="margin-left: 36rpx">
						<view class="info-box1">
							<text class="value">{{ item.experience_hour }}</text>
							<text>小时(体验课时)</text>
						</view>
						<view class="info-box2">
							<text class="value">{{ item.formal_hour }}</text>
							<text>小时(正式课时)</text>
						</view>
						<view class="info-box3">
							<text class="value">{{ item.review_hour }}</text>
							<text>小时(复习课时)</text>
						</view>
					</view>
				</view>
			</c-list>
		</view>

	</view>
</template>

<script setup>
	import gate from "@/static/svgIcon/gate.svg"
	import account from "@/static/svgIcon/account.svg"
	import clock from "@/static/svgIcon/clock.svg"
	import {
		ref,
		reactive
	} from "vue"
	import {
		getTeacherPlanList
	} from "@/apis/coachManagement"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		getCurrentDate
	} from "@/utils"

	import Filter from "../../components/filter/filter.vue"
	const compList = ["keyword"]
	const finished = ref(true)
	const loading = ref(false)
	const error = ref(false)
	const queryParams = reactive({
		start_date: getCurrentDate(),
		end_date: getCurrentDate(),
		search_data: ""
	})
	const statisticsList = ref([])
	onShow(() => {
		Loads()
	})
	const Loads = () => {
		getList()
	}
	const getList = () => {
		loading.value = true
		getTeacherPlanList(queryParams)
			.then((res) => {
				if (res.code === 1) {
					statisticsList.value = res.data
					loading.value = false
				} else {
					error.value = true
					loading.value = false
				}
			})
			.catch((err) => {
				error.value = true
				loading.value = false
			})
	}
	const search = ({
		dateRange,
		keyword
	}) => {
		queryParams.start_date = dateRange[0] || ""
		queryParams.end_date = dateRange[1] || ""
		queryParams.search_data = keyword
		Loads()
	}
	const toDetail = (data) => {
		uni.navigateTo({
			url: "/pages/coachManagement/statisticsDetail?teacher_id=" + data.teacher_id
		})
	}
</script>

<style lang="scss" scoped>
	.content { 
		display: flex; 
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: 100vh;
	}

	.content-bottom-style {

		width: 100%;
		flex: 1;
		overflow: hidden;
	}

	.statistics-list {
		padding: 0 20rpx 30rpx 20rpx;
	}

	.statistics-card {
		padding: 16rpx 20rpx 20rpx 22rpx;
		border-radius: 5px;
		border: 1px solid #ececec;
		font-size: 24rpx;
		margin-bottom: 20rpx;

		.info-box1 {
			color: rgba(255, 141, 26, 1);
		}

		.value {
			font-weight: 600;
		}

		.info-box2 {
			color: rgba(51, 51, 51, 1);
		}

		.info-box3 {
			background: linear-gradient(90deg,
					rgba(121, 72, 234, 1),
					rgba(172, 51, 193, 1));
			/*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
			-webkit-background-clip: text;
			/*将设置的背景颜色限制在文字中*/
			color: transparent;
			/*给文字设置成透明*/
		}
	}

	.mt-14 {
		margin-top: 28rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}
</style>